<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <label>
        <input id="ipt" value="小丑刘广">
    </label>
    <button id="dom"type="button">测试dom操作</button>
    <button id="putong"type="button">测试普通操作</button>
</head>
<body>
<script>
    onload=()=>{
        let ipt=document.querySelector('#ipt');
        document.querySelector('#putong').onclick=()=>{
            //获取ipt中的value属性，不存在返回空字符串
            console.log('value原值',ipt.value);
            //添加/修改ipt的value属性值为傻逼刘广
            ipt.value='傻逼刘广';
            console.log('value新值',ipt.value);
        };
        document.querySelector('#dom').onclick=()=>{
            //获取ipt中的value属性，不存在返回null
            console.log('value原值',ipt.getAttribute('value'));
            //添加/修改ipt的value属性值为刘广是我儿子
            ipt.setAttribute('value','刘广是我儿子');
            console.log('value新值',ipt.getAttribute('value'));
            //删除ipt的value属性
           ipt.removeAttribute('value');
           console.log('value被删除后',ipt.getAttribute('value'));
        }
    }
</script>
</body>
</html>